<template>
    <div id="div1">
        <!-- 侧边栏伸缩 -->
        <menu-unfold-outlined v-if="mainStore().collapsed" class="trigger" @click="menuOutlined" />
        <menu-fold-outlined v-else class="trigger" @click="menuOutlined" />

        <!-- 退出系统 -->
        <a-tooltip placement="bottomRight">
            <template #title>
                <span>{{ $t("main.headVue.loginOut") }}</span>
            </template>
            <login-outlined @click="loginOut" />
        </a-tooltip>

        <!-- 多语言切换 -->
        <a-dropdown>
            <span class="langType">
                <ali-icon :type="lang" viewBox="0 0 1024 1024" />
                {{ showLang() }}
                <down-outlined />
            </span>
            <template #overlay>
                <a-menu @click="switchLang">
                    <a-menu-item key="zh-cn">
                        <ali-icon type="travel-zhongguo" viewBox="0 0 1024 1024" :style="{ fontSize: '15px' }" />中文-简体
                    </a-menu-item>
                    <a-menu-item key="en">
                        <ali-icon type="travel-yingguo" viewBox="0 0 1024 1024" :style="{ fontSize: '15px' }" />English
                    </a-menu-item>
                </a-menu>
            </template>
        </a-dropdown>
    </div>
</template>

<script setup lang='ts'>
import cache from '@/utils/cache';
import i18n from '@/i18n';
import router from '@/router';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    LoginOutlined,
    DownOutlined,
    createFromIconfontCN,
} from '@ant-design/icons-vue';
import { mainStore, setCollapsed } from '@/store/main';
import { ref, type FunctionalComponent, type Ref } from 'vue';
import type { IconFontProps } from '@ant-design/icons-vue/lib/components/IconFont';
import { confirm } from '@/utils';
import { logoutApi } from '@/services/account';

const aliIcon: FunctionalComponent<IconFontProps, {}> = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1575409_9o3qqiqchwq.js'
});
const lang: Ref<string> = ref<string>('');

/**
 * 伸缩侧边菜单
 */
function menuOutlined(): void {
    setCollapsed();
}

/**
 * 显示多语言名称
 */
function showLang(): string {
    switch (cache.getLocale()) {
        case 'zh-cn':
        default:
            lang.value = 'travel-zhongguo';
            return '中文-简体';
        case 'en':
            lang.value = 'travel-yingguo';
            return 'English';
    }
}

/**
 * 切换多语言
 * @param e 
 */
function switchLang(e: any): void {
    if (e.key === i18n.global.locale) {
        return;
    }
    cache.setLocale(e.key);
    window.location.reload();
}

/**
 * 退出系统
 */
async function loginOut(): Promise<void> {
    if (await confirm(i18n.global.t('main.headVue.loginOutSure'), i18n.global.t('main.headVue.loginOutContent'))) {
        //退出方法
        await logoutApi();
        window.localStorage.clear();
        router.replace('/login');
    }
}
</script>

<style lang="less" scoped>
#div1 {
    height: 100%;
    display: flex;
    align-items: center;

    .trigger {
        font-size: 20px;
        padding-left: 30px;
        cursor: pointer;
        transition: color 0.3s;

        :hover {
            color: #1890ff;
        }
    }

    .anticon-login {
        position: fixed;
        right: 30px;
        font-size: 20px;
        cursor: pointer;
        transition: color 0.3s;

        :hover {
            color: #1890ff;
        }
    }

    .langType {
        position: fixed;
        right: 65px;
        font-size: 15px;
        font-weight: bolder;
        cursor: pointer;
        transition: color 0.3s;

        :hover {
            color: #1890ff;
        }

        .anticon svg {
            font-size: 18px;
            margin-right: 5px;
            margin-bottom: -2px;
        }
    }
}
</style>